<!--平台管理-->
<script setup lang="ts">
import {AxiosPromise} from "axios";

defineOptions({
  name: "ImportLog",
  inheritAttrs: false,
});

import {
	getImportLogPage,
} from "@/api/importLog";

import { ElLoading } from "element-plus";
import 'element-plus/theme-chalk/el-loading.css'
import { ImportLogQuery } from "@/api/importLog/types";
import { ImportErrorDetailQuery, ImportVo} from "@/api/importErrorDetail/types";
import {getImportErrorDetailQueryPage, pushOne, rePush, rePushAll} from "@/api/importErrorDetail";
import lodash from "lodash-es";

const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);

// 导入记录变量
const loading = ref(false);
const total = ref(0);
const settlementDate = ref('')
const queryParams = reactive<ImportLogQuery>({
	pageNum: 1,
	pageSize: 20,
});
// 详情变量
const detailLoading = ref(false);
const detailTotal = ref(0);
const logId = ref(0);
const dateList = ref<[]>([])
const detailQueryParams = reactive<ImportErrorDetailQuery>({
	pageNum: 1,
	pageSize: 20,
});

const importLogList = ref<[]>();
const detailList = ref<[]>();
const ids = ref<number[]>([]);
const importParam = reactive<ImportVo>({
		dataText: ''
})

const dialog = reactive<DialogOption>({
  visible: false,
});
const repairDialog = reactive<DialogOption>({
  visible: false,
});

const rules = reactive({
	dataText: [{ required: true, message: "原始数据不能为空", trigger: "blur" }],
});
/**
 * 查询
 */
function handleQuery() {
  loading.value = true;
	if (lodash.size(dateList.value) > 0){
		lodash.set(queryParams, 'startDate', dateList.value[0])
		lodash.set(queryParams, 'endDate', dateList.value[1])
	}else{
		queryParams.startDate = ''
		queryParams.endDate = ''
	}
  getImportLogPage(queryParams)
    .then(({ data }) => {
      importLogList.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

function handleDetailQuery() {
	detailLoading.value = true;
	getImportErrorDetailQueryPage(logId.value, detailQueryParams)
		.then(({ data }) => {
			detailList.value = data.list;
			detailTotal.value = data.total;
		})
		.finally(() => {
			detailLoading.value = false;
		});
}

/**
 * 打开字典类型表单弹窗
 *
 * @param dicTypeId 字典类型ID
 */
function openDialog(id?: any) {
  dialog.visible = true;
  dialog.title = '导入记录详情'
  logId.value = id
	importParam.logId = id
	handleDetailQuery()
}

/**
 * 重置查询
 */
function resetQuery() {
	queryFormRef.value.resetFields();
	queryParams.pageNum = 1;
	settlementDate.value = ''
	handleQuery();
}

/**
 * 关闭弹窗
 */
function closeDialog() {
  dialog.visible = false;
  // 重置弹窗里的变量
	detailList.value = [];
	detailTotal.value = 0;
	detailQueryParams.pageNum = 1
	detailQueryParams.pageSize = 20
}

// 打开修复弹窗
function openRepairDialog(row: any) {
	Object.assign(importParam, row)
	repairDialog.visible = true
	repairDialog.title = '修复'
}

// 关闭修复弹窗
function closeRepairDialog() {
	repairDialog.visible = false
	importParam.dataText = ''
}

// 修复
function submitRepair() {
	dataFormRef.value.validate((isValid: boolean) => {
		if (isValid) {
			const importLoading = ElLoading.service({
				lock: true,
				text: '请稍等...',
				background: 'rgba(0, 0, 0, 0.7)',
			})
			pushOne(importParam)
				.then(() => {
					ElMessage.success("提交成功");
					closeRepairDialog();
					handleQuery()
				}).finally(() => {
		  	importLoading.close()
			})
		}
	});
}

/**
 * 行checkbox change事件
 */
function handleSelectionChange(selection: any) {
	ids.value = selection.map((item: any) => item.id);
}

// 批量提交
function batchSubmit() {
	const importLoading = ElLoading.service({
		lock: true,
		text: '请稍等...',
		background: 'rgba(0, 0, 0, 0.7)',
	})

	rePush(ids.value)
		.then(() => {
			ElMessage.success("提交成功");
			closeRepairDialog();
			handleQuery()
		}).finally(() => {
		importLoading.close()
	})
}

function handleRePushAll() {
	ElMessageBox.confirm("确认推送查询结果全部数据?", "警告", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
	}).then(() => {
		rePushAll(queryParams).then((response) => {
			ElMessage.success("操作成功");
			handleQuery();
		})
	});

}

onMounted(() => {
  handleQuery();
});
</script>

<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
				<el-form-item label="消息类型" prop="platformAndType">
					<el-input
						v-model="queryParams.platformAndType"
						style="width: 200px;"
						placeholder="消息类型"
						clearable
						@keyup.enter="handleQuery"
					/>
				</el-form-item>
				<el-form-item label="关联单号" prop="orderNo">
					<el-input
						v-model="queryParams.orderNo"
						style="width: 200px;"
						placeholder="关联单号"
						clearable
						@keyup.enter="handleQuery"
					/>
				</el-form-item>
				<el-form-item label="队列名称" prop="queueName">
					<el-input
						v-model="queryParams.queueName"
						style="width: 200px;"
						placeholder="队列名称"
						clearable
						@keyup.enter="handleQuery"
					/>
				</el-form-item>
				<el-form-item label="操作日期">
					<el-date-picker
						v-model="dateList"
						style="width: 250px"
						type="daterange"
						:clearable="true"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						value-format="YYYY-MM-DD"
					/>
				</el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery()"
            ><i-ep-search />搜索</el-button
          >
          <el-button @click="resetQuery()"><i-ep-refresh />重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
			<template #header>
				<div class="flex justify-between">
					<div>

					</div>
					<div>
						<el-button class="ml-3" @click="batchSubmit" :disabled="ids.length === 0" v-hasPerm="['sys:logRecord:rePush']"
						>重新推送</el-button
						>
						<el-button class="ml-3" @click="handleRePushAll" :disabled="total === 0" v-hasPerm="['sys:logRecord:rePushAll']"
						>推送所有</el-button
						>
					</div>
				</div>
			</template>
      <el-table
        v-loading="loading"
        size="small"
        highlight-current-row
        :data="importLogList"
				:height="importLogList && importLogList.length > 0 ? 570 : 100"
        border
				@selection-change="handleSelectionChange"
      >
				<el-table-column type="selection" width="40" align="center" />
        <el-table-column label="消息类型" prop="platformAndType" width="120" show-overflow-tooltip/>
        <el-table-column label="关联单号" prop="orderNo" width="200" show-overflow-tooltip/>
        <el-table-column label="队列名称" prop="queueName" width="140" show-overflow-tooltip/>
		  	<el-table-column label="状态" prop="statusName" width="100" show-overflow-tooltip/>
        <el-table-column label="操作时间" width="140" prop="updateTime" show-overflow-tooltip/>
        <el-table-column label="备注" prop="remark" show-overflow-tooltip/>
        <el-table-column fixed="right" label="操作" align="center" width="120">
          <template #default="scope">
            <el-button
              v-hasPerm="['sys:logRecord:pushOne']"
              type="primary"
              link
              size="small"
              @click.stop="openRepairDialog(scope.row)"
              ><i-ep-view />编辑</el-button>
					</template>
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>

	  <el-dialog
			  v-model="repairDialog.visible"
			  :title="repairDialog.title"
			  width="500px"
			  :close-on-click-modal="false"
			  @close="closeRepairDialog"
	  >
		<el-form
				ref="dataFormRef"
				:model="importParam"
				:rules="rules"
		>
		<el-form-item label="原始数据" prop="dataText">
		  <el-input type="textarea" v-model="importParam.dataText" :rows="20" placeholder="请输入原始数据"></el-input>
		</el-form-item>
		</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="submitRepair">提 交</el-button>
					<el-button @click="closeRepairDialog">取 消</el-button>
				</div>
			</template>
	  </el-dialog>
  </div>
</template>
